<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="header">
      <el-row justify="space-between" align="middle">
        <el-col>
          <div class="logo">Welcome, {{ username }}</div>
        </el-col>
        <el-col>
          <el-button type="danger" @click="logout">Logout</el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-main class="main-content">
      <el-card class="content-card">
        <h2>Dashboard</h2>
        <p>This is your personal dashboard. Here you can manage your settings, view analytics, and more.</p>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      username: 'User', // 可以根据登录时输入的用户名进行个性化展示
    };
  },
  methods: {
    logout() {
      this.$emit('logout');
    },
  },
};
</script>

<style scoped>
.header {
  background-color: #409eff;
  color: white;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.main-content {
  padding: 20px;
  background-color: #f5f5f5;
}

.content-card {
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
</style>
